<template>
    <div class="noteDetail">
        <el-container>
            <el-header style="text-align: center; font-size: 18px; font-weight: bolder">
                <el-button @click="$router.push('/note/noteshelf')" type="plain" icon="el-icon-arrow-left">返回</el-button>
                <span>{{note.nname}}</span>
            </el-header>
            <el-main>
                <mavon-editor v-model="note.ncontentMd" @save="saveNote"></mavon-editor>
            </el-main>
        </el-container>

    </div>
</template>

<script>
    export default {
        name: "NoteEdit",
        data() {
            return {
                note: {}
            }
        },
        methods: {
            saveNote(value, render) {
                this.note.ncontentMd = value
                this.note.ncontentHtml = render
                const _this = this
                axios.put('http://localhost:2020/note/noteDetail/update', this.note).then(function (res) {
                    if (res.data.status === 200) {
                        _this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: 'success',
                            center: true
                        });
                    }
                })
            }
        },
        mounted() {
            if (this.$route.params.noteId) {
                const _this = this
                axios.get('http://localhost:2020/note/noteDetail/'+this.$route.params.noteId).then(function (res) {
                    if (res.data.status === 200) {
                        _this.note = res.data.object
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .el-button {
        position: absolute;
        left: 30px;
        top: -10px;
        margin: 20px;
    }
    .el-header {
        position: relative;
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }
</style>